<template>
  <view class="list-page">
    <up-sticky bgColor="#fff">
      <tabs-list :list="list1" :current="current" @change="onChange"></tabs-list>
    </up-sticky>
    <view class="list-content">
      <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
        <view class="content-nav" v-for="(item,index) in goods" :key="index" @click="onTransaction(index)">
          <view class="content-head">
            <view class="head-timer">2024-08-27 09:42</view>
            <view class="head-status">等待付款中</view>
          </view>
          <view class="content-commodity">
            <CommodityNav :src="item.goodImg" :title="item.goodName" :number="item.goodSold" :name="item.goodName"
              :price="item.goodPrice"></CommodityNav>
          </view>
          <view class="content-label">
            <view class="label-indent">
              <image src="@/static/icon/user/copy.png" mode="" class="icon-copy"></image>
              复制订单号
            </view>
            <view class="label-btn payment">立即购买</view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
  } from 'vue';
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
  import CommodityNav from './components/Commodity-Nav.vue'
  import {
    apiGoods
  } from "./mock.js"
  const lineBg = "../../static/icon/user/line-list.png";
  const current = ref()
  let tabsShow = reactive(true)
  const newMescroll = reactive([])
  const list1 = reactive([{
      name: '全部'
    },
    {
      name: '待付款'
    },
    {
      name: '待发货'
    },
    {
      name: '待收货'
    },
    {
      name: '已完成'
    },
  ]);
  const goods = ref([])
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)


  onLoad((e) => {
    current.value = +e.type
  })

  function onTransaction(index) {
    uni.navigateTo({
      url: `/subpages/userPage/transaction-order?type=${index}`
    })
  }

  function onChange(e) {
    current.value = e.index
    goods.value = []
    downCallback()
  }

  const upCallback = (mescroll) => {
    apiGoods(mescroll.num, mescroll.size).then(res => {
      console.log(res, 44444)
      const curPageData = res.list || [] // 当前页数据
      if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
      goods.value = goods.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }
</script>

<style lang="less" scoped>
  .list-page {
    height: 100%;
    display: flex;
    flex-direction: column;

    /deep/ .u-tabs__wrapper__nav__item {
      flex: 1;
      position: relative;
    }

    /deep/ .u-tabs__wrapper__nav__line {
      position: absolute;
      top: 20rpx;
      right: 91%;
    }

    /deep/ .downwarp-tip {
      text-align: center;
    }

    .list-content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: scroll;

      .content-nav {
        width: 100%;
        height: 470rpx;
        background: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 32rpx 32rpx 0 32rpx;
        margin-top: 20rpx;

        .content-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }

        .content-commodity {
          margin-top: 40rpx;
        }

        .content-label {
          width: 100%;
          height: 128rpx;
          border-top: 1rpx solid rgba(0, 0, 0, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;

          .label-indent {
            display: flex;
            align-items: center;

            .icon-copy {
              width: 28rpx;
              height: 28rpx;
              margin-right: 8rpx;
            }
          }

          .label-btn {
            width: 208rpx;
            height: 80rpx;
            opacity: 1;
            border-radius: 114rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 80rpx;
            text-align: center;
          }

          .payment {
            background: rgba(255, 255, 255, 1);
            border: 2rpx solid rgba(255, 65, 108, 1);
            color: rgba(255, 65, 108, 1);
          }
        }
      }
    }
  }
</style>